<!-- 
  @name: 添加充值/免单客户,搜索页面
  @date: 2020.3.19
 -->
<template>
	<view class="content">
		<!-- 搜索输入框 -->
		<view class="topview">
			<view class="input">
				<input type="number" class="int" placeholder="请输入手机号" placeholder-class="phcolor" v-model.trim="phone" />
				<view class="icon" @tap="search"></view>
			</view>
		</view>
		
		<!-- 搜索结果 -->
		<view class="card" @tap="goEdit" v-show="info.userPhone">
			<image class="img" :src="info.userPhoto"></image>
			<text class="name">{{info.userName}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',  //手机号
				info: {},  //信息
			}
		},
		onLoad() {
			
		},
		methods: {
			//前往编辑
			goEdit() {
				this.$store.commit('setTmpData', JSON.stringify(this.info));
				this.info = {};
				this.phone = '';
				this.$navigateTo('./mbedit?ptype=a');
			},
			//搜索
			search() {
				if(!this.phone) {
					this.$showToast('请输入手机号！');
					return;
				}
				if(!this.$tmp.REG_PHONE.test(this.phone)) {
					this.$showToast('请输入正确的手机号！');
					return;
				}
				this.doSearch();
			},
			doSearch() {
				this.$http({
					url: this.$api.userUrl + 'getuserinfobyuserphone',
					data: {
						userPhone: this.phone,
					}
				}).then(res => {
					this.info = res;
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $color-white;
	}
	
	/* 顶部搜索区 */
	.topview {
		width: 750rpx;
		padding: 22rpx 40rpx;
		background-color: $color-primary;
		.input {
			width: 100%;
			height: 68rpx;
			border-radius: 34rpx;
			background-color: $color-white;
			display: flex;
			flex-direction: row;
			align-items: center;
			.int {
				flex: 1;
				margin-left: 40rpx;
			}
			.icon {
				width: 28rpx;
				height: 28rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15lnRqAG9eZAAAEgMBvtvE395.png');
			}
		}
	}
	
	/* 搜索结果 */
	.card {
		width: 750rpx;
		height: 110rpx;
		border-bottom: 1rpx solid $color-list;
		display: flex;
		flex-direction: row;
		align-items: center;
		.img {
			width: 60rpx;
			height: 60rpx;
			margin-left: 50rpx;
			border-radius: $border-radius-circle;
		}
		.name {
			margin-left: 60rpx;
		}
	}
	
</style>
